<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>搜索结果页frame</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<style>
			body {
			}
			.m-t {
				margin-top: 13px;
			}
			.color-1 {
				color: #6e6e6e;
			}
			.color-2 {
				color: #b4b4b4;
			}
			.color-3 {
				color: #ff0f2e;
			}
			.color-4 {
				color: #ff8000;
			}
			#list-view {
				background-color: #fff;
			}
			#list-view > li {
				padding: 0 15px;
				border-bottom: #f8f8f8 13px solid;
			}
			#list-view > li:nth-last-child(1) {
				border-bottom: 0;
			}
			#list-view > li > div {
				padding: 13px 0;
			}
			#list-view > li > div:nth-child(1) {
				border-bottom: #e6e6e6 1px solid;
			}
			.acms-btn-style {
				width: 70px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				border-radius: 2.5px;
				background-color: #FF9F00;
				color: #fff;
				font-size: 14px;
			}
			.msg-2-container {
				display: none;
			}
			.acms-btn-style-2 {
				text-align: center;
				width: 70px;
				height: 25px;
				line-height: 25px;
				color: #fff;
				background-color: #ec001f;
				border-radius: 2.5px;
			}
		</style>
	</head>
	<body>
		<!-- 接障(接障、结单、疑难单)\平障(未完成、已完成) -->
		<div id="list-item-temp" style="display: none;">
			<div class="title-container flex-container flex-between">
				<div class="acms-msg1">
					--
				</div>
				<div class="acms-msg2">
					--
				</div>
			</div>
			<div class="msg-container">
				<div class="flex-container flex-between">
					<div class="acms-msg3 color-1">
						--
					</div>
					<div class="acms-msg4 color-2">
						--
					</div>
				</div>
				<div class="m-t flex-container flex-between">
					<div class="acms-msg5 color-1">
						--
					</div>
					<div class="acms-msg6"></div>
				</div>
			</div>
			<div class="msg-2-container">
				<div class="acms-msg7-p">
					<span>处理人：</span><span class="acms-msg7">--</span>
				</div>
				<div class="xxs-p flex-container flex-center-v">
					<div>
						报障评分：
					</div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
				</div>
			</div>
		</div>
		<ul id="list-view"></ul>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/request.js"></script>
	<script type="text/javascript">
		//从哪里页面进入搜索的  2==接障、3==平障、4==统计
		var mTag;
		//搜索内容
		var mSearchMsg;
		//item下标
		var mItemIndex = 0;
		//用户id
		var mUserId;
		var mListView;
		//列表数据
		var mLVDatas;
		//是否加载更多
		var mIsLoadMore = false;
		//第几页
		var mPageNum = 1;
		//每页数据条数
		var mPageSize = 10;
		apiready = function() {
			initData();
			initView();
			requestList(mPageSize, mPageNum);
		};
		function initData() {
			mUserId = $api.getStorage(MyCom.key_userid);
			mSearchMsg = api.pageParam.searchMsg;
			mTag = api.pageParam.tag;
			console.log('mSearchMsg=' + mSearchMsg + '   mTag=' + mTag);
		}

		function initView() {
			mListView = document.getElementById('list-view');
			listenerScrollBottom();
			setRemoveSearchResultListener();
		}

		/**
		 * 显示列表
		 * @param{Object} datas - 用户数据数组json
		 */
		function showListView(datas) {
			if (datas == null || datas.length < 1) {
				return;
			}
			var index = 0;
			var item = '';
			//判断是否是加载更多。是，mLVDatas添加数据。否，mLVDatas清空数据，mListView清空html
			if (mIsLoadMore) {
				for (index in datas) {
					mLVDatas.push(datas[index]);
				}
			} else {
				mListView.innerHTML = '';
				mLVDatas = null;
				mLVDatas = datas;
			}
			index = 0;
			//展示listview
			for (index in datas) {
				item = createLVItem(datas[index]);
				mListView.appendChild(item);
			}
			if (mIsLoadMore) {
				mIsLoadMore = false;
				hideLoadMoreView();
			} else {
				api.hideProgress();
			}
		}

		/**
		 * 创建列表的item
		 * @param {Object} data - 用户信息的object对象
		 */
		function createLVItem(data) {
			//是否点击结束报障
			var isClick1 = false;
			//是否点击开始处理按钮
			var isClick2 = false;
			//状态： 1 待处理 2.已受理 3 .处理中  4.已处理 5.疑难单 6.报障关闭 7.已完成
			var status = parseInt(data.status);
			//是否二次受理
			var isTwo = data.two == 0 ? false : true;
			//是否已加急
			var isUrgent = data.urgent == 1 ? true : false;
			//评分
			var gradle = data.point;
			var li = document.createElement('li');
			li.innerHTML = document.getElementById('list-item-temp').innerHTML;
			//故障情况
			var msg1 = li.getElementsByClassName('acms-msg1')[0];
			//故障状态
			var msg2 = li.getElementsByClassName('acms-msg2')[0];
			//报障人
			var msg3 = li.getElementsByClassName('acms-msg3')[0];
			//报障时间
			var msg4 = li.getElementsByClassName('acms-msg4')[0];
			//故障地点
			var msg5 = li.getElementsByClassName('acms-msg5')[0];
			//结束报障&&已加急的容器&&开始处理按钮
			var msg6 = li.getElementsByClassName('acms-msg6')[0];
			//统计才显示的view
			var container2 = li.getElementsByClassName('msg-2-container')[0];
			//处理人
			var msg7 = li.getElementsByClassName('acms-msg7')[0];
			var msg7_p = li.getElementsByClassName('acms-msg7-p')[0];
			//评分星星
			var xxs = li.getElementsByClassName('icon-xx');
			var xxs_p = li.getElementsByClassName('xxs-p')[0];
			msg1.innerText = MyCom.dataFaultTolerant(data.title);
			msg3.innerText = MyCom.dataFaultTolerant(data.nick_name);
			msg4.innerText = MyCom.dataFaultTolerant(data.create_time);
			msg5.innerText = MyCom.dataFaultTolerant(data.warn_location);
			msg6.innerText = MyCom.dataFaultTolerant(data.warn_location);
			//判断，当前数据状态，显示不同的view
			switch(parseInt(status)) {
				case 1:
					//待处理
					msg2.innerText = '待处理';
					msg2.style.color = '#ff0f2e';
					break;
				case 2:
					//已受理
					if (isTwo) {
						msg2.innerText = '二次受理';
					} else {
						msg2.innerText = '已受理';
					}
					msg2.style.color = '#ff8000';
					break;
				case 3:
					//处理中
					if (isTwo) {
						msg2.innerText = '二次处理中';
					} else {
						msg2.innerText = '处理中';
					}
					msg2.style.color = '#ff8000';
					break;
				case 4:
					//已处理
					if (isTwo) {
						msg2.innerText = '已二次处理';
					} else {
						msg2.innerText = '已处理';
					}
					msg2.style.color = '#ff8000';
					break;
				case 5:
					//疑难单
					msg2.innerText = '疑难单';
					msg2.style.color = '#ff8000';
					break;
				case 6:
					//报障关闭
					msg2.innerText = '报障关闭';
					msg2.style.color = '#b4b4b4';
					break;
				case 7:
					//已完成
					msg2.style.color = '#b4b4b4';
					msg2.innerText = '已完成';
					break;
				default:
					MyCom.errorTip(2);
			}
			if (mTag == 2) {
				if (status == 1) {
					if (isUrgent) {
						msg6.innerText = '已加急'
					} else {
						msg6.innerText = ''
					}
				} else if (status == 4) {
					msg6.className = 'acms-msg6 acms-btn-style';
					msg6.innerText = '结束报障';
					msg6.onclick = function() {
						//结束报障
						isClick1 = true;
					}
				} else if (status == 5) {
					msg6.innerText = ''
				} else {
					msg6.innerText = ''
				}
			} else if (mTag == 3) {
				if (status == 2) {
					msg6.innerText = '开始处理'
					msg6.className = 'acms-msg6 acms-btn-style-2';
					msg6.onclick = function() {
						//开始处理
						isClick2 = true;
					}
				} else {
					msg6.innerText = ''
				}
			} else {
				container2.style.display = 'none';
				if (status != 1) {
					msg7.innerText = MyCom.dataFaultTolerant(data.action_person);
				} else {
					msg7_p.style.display = 'none';
				}
				if (gradle != null) {
					for (var i = 0; i < gradle; i++) {
						xxs[i].className = 'm-l icon-xx icon-xx-s';
					}
				} else {
					xxs_p.style.display = 'none';
				}
			}
			li.onclick = function() {
				var clickIndex = 0;
				var lis = mListView.getElementsByTagName('li');
				var i = 0;
				for (; i < lis.length; i++) {
					if (this == lis[i]) {
						clickIndex = i;
						mItemIndex = clickIndex;
						break;
					}
				}
				if (isClick1) {
					isClick1 = false;
					reuqestEndCp(mLVDatas[mItemIndex].id, 7);
				} else if (isClick2) {
					isClick2 = false;
					requestStartHandleCp(mLVDatas[mItemIndex].id);
				} else {
					openDetailsW(mLVDatas[mItemIndex].id, status);
				}
			}
			return li;
		}

		/**
		 * 移除 item
		 * @param{Number} index - 要移除的item的下标
		 */
		function removeLVItem(index) {
			mListView.removeChild(mListView.getElementsByTagName('li')[index]);
			mLVDatas.splice(index, 1);
		}

		/**
		 * 替换原item
		 * @param{Object} data - item的数据
		 */
		function replaceItem(data) {
			var newItem = createLVItem(data);
			var oldItem = mListView.getElementsByTagName('li')[mItemIndex];
			mListView.replaceChild(newItem, oldItem);
		}

		/**
		 * 打开详情页
		 */
		function openDetailsW(cpid, status) {
			console.log('openDetailsW--id=' + cpid);
			var name = 'details';
			var url = '';
			if (mTag == 2) {
				if (status == 1 || status == 5 || status == 4) {
					url = './send_order/order_details.html';
				} else {
					url = './complaint_statistics/complaint_details.html';
				}
			} else if (mTag == 3) {
				if (status == 2 || status == 3 || status == 4) {
					url = './deal_order/order_details.html';
				} else {
					url = './complaint_statistics/complaint_details.html';
				}
			} else {
				url = './complaint_statistics/complaint_details.html';
			}
			console.log('url=' + url);
			api.openWin({
				name : name,
				url : url,
				pageParam : {
					'id' : cpid
				}
			});
		}

		/**
		 * 隐藏“加载更多”的view
		 */
		function hideLoadMoreView() {
			var loadViews = document.getElementsByClassName('load-more-content');
			if (loadViews.length != 0) {
				document.getElementsByTagName('body')[0].removeChild(loadViews[0]);
			}
		}

		/**
		 * 展示“加载更多”的view
		 */
		function showLoadMoreView() {
			var loadView = document.createElement('div');
			loadView.className = 'load-more-content';
			loadView.innerHTML = '<img src="../image/icon_loading.png" /><span>加载中</span>';
			document.getElementsByTagName('body')[0].appendChild(loadView);
		}

		/**
		 * 加载更多失败处理
		 */
		function loadMoreFailure(msg) {
			msg = msg || '加载更多失败！'
			//还原页数（第几页）
			mPageNum--;
			mIsLoadMore = false;
			hideLoadMoreView();
			api.toast({
				msg : msg
			});
		}

		//设置“滑动到底部”事件监听
		function listenerScrollBottom() {
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
				}
			}, function(ret, err) {
				console.log();
				//判断列表是否已经到达屏幕底部，是，就代表可以加载更多；否，就不让加载更多。
				if (mListView.offsetHeight >= api.frameHeight && !mIsLoadMore) {
					mIsLoadMore = true;
					showLoadMoreView();
					requestList(mPageSize, ++mPageNum)
				}
			});
		}

		/**
		 * 服务器请求：搜索
		 * @param{int} pgS - 每页的数据条数
		 * @param{int} pgN - 页数
		 */
		function requestList(pgS, pgN) {
			var tag = 'requestList_more';
			if (!mIsLoadMore) {
				api.showProgress({
				});
				api.cancelAjax({
					tag : tag
				});
				tag = null;
			}
			var data = {
				values : {
					'page' : pgN,
					'rows' : pgS,
					'userid' : mUserId
				}
			};
			if (mSearchMsg != null && mSearchMsg != '') {
				data.values.serachcontent = mSearchMsg;
			}
			var url;
			if (mTag == 2) {
				url = $api.getStorage(MyCom.key_server) + MyRequest.URL_GET_CP_SEARCH;
			} else if (mTag == 3) {
				url = $api.getStorage(MyCom.key_server) + MyRequest.URL_P_CP_SEARCH;
			} else if (mTag == 4) {
				url = $api.getStorage(MyCom.key_server) + MyRequest.URL_SS_RESULT_SEARCH;
			} else {
				MyCom.errorTip(1);
			}
			MyRequest.requestMethod(url, data, function(re) {
				console.log('搜索的数据--ret=' + JSON.stringify(re));
				if (re) {
					var code = re.code;
					if (code == 1) {
						showListView(re.list);
					} else {
						if (!mIsLoadMore) {
							api.hideProgress();
							api.toast({
								msg : re.msg
							});
						} else {
							//还原页数（第几页）
							loadMoreFailure('没有更多数据！');
						}
					}
				} else {
					if (!mIsLoadMore) {
						MyCom.errorTip(2);
					} else {
						loadMoreFailure();
					}
				}
			}, tag);
		}

		/**
		 * 服务器请求：开始处理
		 * @param{Number} cpid - 故障id
		 */
		function requestStartHandleCp(cpid) {
			api.showProgress({
			});
			var data = {
				values : {
					'id' : cpid
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_START_HANDLE;
			MyRequest.requestMethod(url, data, function(re) {
				if (re) {
					var code = re.code;
					if (code == 1) {
						mLVDatas[mItemIndex].status = '3';
						replaceItem(mLVDatas[mItemIndex]);
						api.hideProgress();
					} else {
						api.hideProgress();
						api.toast({
							msg : re.msg
						});
					}
				} else {
					api.hideProgress();
					api.toast({
						msg : '服务器连接失败'
					});
				}
			});
		}

		/**
		 *服务器请求：结束报障
		 * @param{Number} cpid - 故障id
		 * @param{Number} type - 7==已完成,5==转疑难单
		 */
		function reuqestEndCp(cpid, type) {
			api.showProgress({
			});
			var data = {
				values : {
					'id' : cpid,
					'status' : type
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_END_CP;
			MyRequest.requestMethod(url, data, function(re) {
				console.log('结束保障--ret=' + JSON.stringify(re));
				if (re) {
					var code = re.code;
					if (code == 1) {
						if (type == 7) {
							mLVDatas[mItemIndex].status = '7';
							replaceItem(mLVDatas[mItemIndex]);
						}
						api.hideProgress();
					} else {
						api.hideProgress();
						api.toast({
							msg : re.msg
						});
					}
				} else {
					api.toast({
						msg : '连接服务器失败'
					});
				}
			});
		}

		/**
		 * 设置“移除结单”的监听
		 */
		function setRemoveSearchResultListener() {
			api.addEventListener({
				name : 'RemoveSearchResultListener'
			}, function(ret, err) {
				if (ret) {
					removeLVItem(mItemIndex);
				} else {
					MyCom.errorTip(1);
				}
			});
		}
	</script>
</html>
